/* panorama by:gaox date:2016-09-22 */
var init = 0; //默认加载第一个图片数组
var imgFinish; //是否页面加载完成
var Panorama = {
    config : {
        target : '', //目标容器 class '.box'  id '#box'
        perspective : 0, //视角坐标
        isController : false, //是否开启foot控件 false=不开启 true=开启 默认false 
        controllerTitle : '选择房间', //控件名称
        panosImg : [
            {
                title : '', //标题
                front : '', //立方体 前图片
                right : '', //立方体 右图片
                back : '', //立方体 后图片
                left : '', //立方体 左图片
                up : '', //立方体 上图片
                down : '', //立方体 下图片
            }
        ]
    },
    init : function(){
        imgFinish = [0,0,0,0,0,0];
        $(this.config.target).hide();

        //加载动画
        var loadingHtml = '<div id="loading">';
        loadingHtml += '<div class="spinner">';
        loadingHtml += '<div class="bounce1"></div>';
        loadingHtml += '<div class="bounce2"></div>';
        loadingHtml += '<div class="bounce3"></div>';
        loadingHtml += '</div>';
        loadingHtml += '</div>';
        $("body").append(loadingHtml);

        $("html").css({'height':'100%','-webkit-user-select: none;user-select':'none'});
        $("body").css({'margin':0,'background':'#0C1021','overflow':'hidden','height':'100%'});
        
        var targetHtml = '<div id="pano"><div id="pano_box"></div></div><div class="pannel" style="width: 100%;height: 100%;position: absolute;z-index: 10;"></div>';
        $(this.config.target).html(targetHtml);

        var sizeConf = {
            'w':$(window).width(),
            'h':$(window).height(),
            'canvasW':200, //默认宽度512
            'canvasH':200
        };
        
        

        var frontImg = new Image();
        frontImg.src = this.config.panosImg[init].front;
        frontImg.onload = function () { //确保图片已经加载完毕 
            sizeConf.canvasW = frontImg.width;
            sizeConf.canvasH = frontImg.height;
            if (sizeConf.canvasW != sizeConf.canvasH) {
                alert("请配置正方形图片");
                return false;
            }

            Panorama.loadCanvas(sizeConf);

            Panorama.controller();
        }

        //判断是否加载完成
        this.isImgLoad();
    },
    loadCanvas : function(sizeConf){ //loading canvas
        var w = sizeConf.w;
        var h = sizeConf.h;
        var canvasW = sizeConf.canvasW;
        var canvasH = sizeConf.canvasH;


        this.config.perspective = canvasW/2;

        var canvasStr = '';
        canvasStr += '<canvas id="frontCanvas" width="'+canvasW+'" height="'+canvasH+'"></canvas>';
        canvasStr += '<canvas id="rightCanvas" width="'+canvasW+'" height="'+canvasH+'"></canvas>';
        canvasStr += '<canvas id="backCanvas" width="'+canvasW+'" height="'+canvasH+'"></canvas>';
        canvasStr += '<canvas id="leftCanvas" width="'+canvasW+'" height="'+canvasH+'"></canvas>';
        canvasStr += '<canvas id="upCanvas" width="'+canvasW+'" height="'+canvasH+'"></canvas>';
        canvasStr += '<canvas id="downCanvas" width="'+canvasW+'" height="'+canvasH+'"></canvas>';
        
        $("#pano_box").html(canvasStr);


        $("#pano").css({
            'position':'absolute',
            'left':0,
            'right':0,
            'width':w+'px',
            'height':h+'px',
            'perspective':this.config.perspective+'px'
        });

        $("#pano_box").css({
            'position':'absolute',
            '-webkit-transform-origin-x':(w/2)+'px',
            '-webkit-transform-origin-y':(h/2)+'px',
            'transform-style':'preserve-3d',
            'transform':'translateZ('+this.config.perspective+'px) rotateX(0deg) rotateY(0deg)'
        });
        

        $("canvas").css({'position':'absolute','backface-visibility':'hidden'});
        $("canvas").css({'left':(w-canvasW)/2, 'top':(h-canvasH)/2});


        //front
        var frontCtx = document.getElementById("frontCanvas").getContext("2d");
        // frontCtx.font = "40px Arial";
        // frontCtx.fillText("front",110,150);
        $("#frontCanvas").css({'transform':'rotateX(0deg) rotateY(0deg) translateZ(-'+(canvasW/2-1)+'px)'});

        

        //left
        var leftCtx = document.getElementById("leftCanvas").getContext("2d");
        // leftCtx.font = "40px Arial";
        // leftCtx.fillText("left",110,150);
        $("#leftCanvas").css({'transform':'rotateX(0deg) rotateY(-270deg) translateZ(-'+(canvasW/2-1)+'px)'});

        
        

        //right
        var rightCtx = document.getElementById("rightCanvas").getContext("2d");
        // rightCtx.font = "40px Arial";
        // rightCtx.fillText("right",110,150);
        $("#rightCanvas").css({'transform':'rotateX(0deg) rotateY(-90deg) translateZ(-'+(canvasW/2-1)+'px)'});

       
       
        //up
        var upCtx = document.getElementById("upCanvas").getContext("2d");
        // upCtx.font = "40px Arial";
        // upCtx.fillText("up",110,150);
        $("#upCanvas").css({'transform':'rotateX(-90deg) rotateY(0deg) translateZ(-'+(canvasW/2-1)+'px)'});

       

        //down
        var downCtx = document.getElementById("downCanvas").getContext("2d");
        // downCtx.font = "40px Arial";
        // downCtx.fillText("down",110,150);
        $("#downCanvas").css({'transform':'rotateX(90deg) rotateY(0deg) translateZ(-'+(canvasW/2-1)+'px)'});
        


        //back
        var backCtx = document.getElementById("backCanvas").getContext("2d");
        // backCtx.font = "40px Arial";
        // backCtx.fillText("back",110,150);
        $("#backCanvas").css({'transform':'rotateX(0deg) rotateY(-180deg) translateZ(-'+(canvasW/2-1)+'px)'});

        //加载图片
        var frontImg = new Image();
        frontImg.src = this.config.panosImg[init].front;
        frontImg.width = '100%';
        frontImg.height = '100%';
        frontImg.onload = function () { //确保图片已经加载完毕 
            frontCtx.drawImage(frontImg,0,0);
            imgFinish[0] = 1; 
        }

        var leftImg = new Image();
        leftImg.src = this.config.panosImg[init].left;
        leftImg.width = '100%';
        leftImg.height = '100%';
        leftImg.onload = function () { //确保图片已经加载完毕 
            leftCtx.drawImage(leftImg,0,0);
            imgFinish[1] = 1;
        }

        var rightImg = new Image();
        rightImg.src = this.config.panosImg[init].right;
        rightImg.width = '100%';
        rightImg.height = '100%';
        rightImg.onload = function () { //确保图片已经加载完毕 
            rightCtx.drawImage(rightImg,0,0);
            imgFinish[2] = 1;
        }

        var upImg = new Image();
        upImg.src = this.config.panosImg[init].up;
        upImg.width = '100%';
        upImg.height = '100%';
        upImg.onload = function () { //确保图片已经加载完毕 
            upCtx.drawImage(upImg,0,0);  
            imgFinish[3] = 1;
        }

        var downImg = new Image();
        downImg.src = this.config.panosImg[init].down;
        downImg.width = '100%';
        downImg.height = '100%';
        downImg.onload = function () { //确保图片已经加载完毕 
            downCtx.drawImage(downImg,0,0); 
            imgFinish[4] = 1; 
        }

        var backImg = new Image();
        backImg.src = this.config.panosImg[init].back;
        backImg.width = '100%';
        backImg.height = '100%';
        backImg.onload = function () { //确保图片已经加载完毕 
            backCtx.drawImage(backImg,0,0);  
            imgFinish[5] = 1;
        }

        //启动事件
        touch.config = {
            swipeFactor: 1,          //加速因子, 值越大变化速率越快
        };

        var angle = 30;
        touch.on('.pannel', 'touchstart', function(ev){
            ev.originEvent.preventDefault();
        }); 

        var initialX=0;
        var initialY=0;
        touch.on('.pannel', 'drag dragstart dragend', function(ev){
            var x = (initialX + ev.distanceX)*0.3;
            var y = (initialY + ev.distanceY)*0.3;

             /* 拖动结束 */
            if(ev.fingerStatus === 'end'){
                initialX += ev.distanceX;
                initialY += ev.distanceY;
            }

            

            $("#pano_box").css({
                'transition':'all 0.5s cubic-bezier(0.19, 0.12, 0.51, 0.85)',
                'transform':'translateZ('+Panorama.config.perspective+'px) rotateX('+y+'deg) rotateY('+(-x)+'deg)'
            });
        });
    },
    isImgLoad : function(){
        var isLoad =true;
        for (var i = 0; i < imgFinish.length; i++) {
            if(imgFinish[i] == 0){
                isLoad = false;
            }
        }
        
        if(isLoad){
            clearTimeout(t_img); // 清除定时器
            $("#loading").remove();
            $(this.config.target).show();
        }else{
            isLoad = true;
            t_img = setTimeout(function(){
                Panorama.isImgLoad(); // 递归扫描
            },500); // 我这里设置的是500毫秒就扫描一次，可以自己调整
        }
    },
    tabSwitch : function(inx){ //切换tab
        init = inx;
        Panorama.init();
    },
    showTab : function(){
        $(".tabBox").slideToggle(500);
    },
    controller : function(){ //添加控件
        //controller box
        var page_info = '<div class="page_info"></div>';
        $(this.config.target).append(page_info);


        //author
        var authorHtml = '<p class="author"><span class="house_icon"></span> <span>天黑</span></p>';
        $(".page_info").append(authorHtml);
        
        
        Panorama.createStyle();


        //footer 判断是否开启控件
        if (this.config.isController) {
            
            this.config.controllerTitle = typeof(this.config.controllerTitle)!='undefined'?this.config.controllerTitle:'选择房间';

            var panosImg = this.config.panosImg;

            //场景切换容器
            var tabHtml = '<div class="tabBox"><div class="bg"></div><ul>';
            for (var i = 0; i < panosImg.length; i++) {
                tabHtml += '<li onclick="Panorama.tabSwitch('+i+')" style="background-image:url('+panosImg[i].front+');"><span>'+panosImg[i].title+'</span></li>';
            }
            tabHtml += '</ul></div>';
            $(".page_info").append(tabHtml);

            var ulW = (120) * panosImg.length;
            $(".tabBox ul").width(ulW);
            

            //拖动
            if ($(".tabBox ul").width() > $(".tabBox").width()) {
                var minLeft = $(window).width() - $(".tabBox ul").width();
                
                var initialX = 0;
                touch.on('.tabBox ul', 'drag dragstart dragend', function(ev){
                    if(initialX < minLeft){
                        initialX = minLeft;
                        ev.distanceX = 0;
                    }
                    if (initialX > 0) {
                        initialX = 0;
                        ev.distanceX = 0;
                    }

                    var x = initialX + ev.distanceX;
                    
                    /* 拖动结束 */
                    if(ev.fingerStatus === 'end'){
                        initialX += ev.distanceX;
                        if(initialX < minLeft){
                            $(".tabBox ul").css({'marginLeft':minLeft+'px'});
                        }
                        if (initialX > 0) { 
                            $(".tabBox ul").css({'marginLeft':'0px'});
                        }
                    }else{
                        $(".tabBox ul").css({'marginLeft':x+'px'});
                    }
                });
            }


            var cnlHtml = '<div class="footer"><ul><li onclick="Panorama.showTab();"><span class="icon_box window_inco"></span><span>'+this.config.controllerTitle+'</span></li><li></li><li></li><li></li></ul></div>';
            $(".page_info").append(cnlHtml);
            
        }

    },
    createStyle : function(){ //创建样式
        var cssString = "\
.author{\
    position: absolute;\
    z-index: 100000000;\
    color: white;\
    margin: 3px;\
    padding: 0;\
    font-size: 12px;\
}\
.author span{\
    float: left;\
    line-height: 48px;\
}\
.house_icon{    \
    width: 30px;\
    height: 32px;\
    display: block;\
}\
.house_icon:before{\
    content: '';\
    height: 6px;\
    width: 10px;\
    display: block;\
    border: 3px #ffffff solid;\
    border-top: 0;\
    position: absolute;\
    top: 20px;\
    left: 7px;\
}\
.house_icon:after{\
    content: '';\
    height: 15px;\
    width: 15px;\
    border-top: 3px #ffffff solid;\
    border-right: 3px #ffffff solid;\
    position: absolute;\
    top: 8px;\
    left: 6px;\
    transform: rotate(-45deg);\
    -webkit-transform: rotate(-45deg);\
}\
.footer{\
z-index: 99;\
    position: absolute;\
    bottom: 3px;\
    width: 100%;\
}\
.footer ul{\
  margin: 0;\
  padding: 0;\
}\
.footer ul li{\
  list-style: none;\
    float: left;\
    width: 25%;\
    text-align: center;\
    color: white;\
}\
.footer ul li span{\
  display: block;\
  font-size: 12px;\
}\
.footer ul li span.icon_box{\
    position: relative;\
    width: 30px;\
    height: 30px;\
    margin: 0 auto;\
    /*border: 1px solid #a3a3a3;*/\
    -moz-border-radius: 25px;\
    -webkit-border-radius: 25px;\
    border-radius: 25px;\
    margin-bottom: 5px;\
    /*opacity: 0.6;*/\
}\
.window_inco:before{  \
    content: '';\
    height: 14px;\
    width: 14px;\
    background: #fff;\
    border-radius: 4px;\
    -webkit-border-radius: 4px;\
    -moz-border-radius: 4px;\
    display: block;\
    position: absolute;\
    top: 0;\
    left: 0px;\
    box-shadow: 16px 0 0 #fff, 0 16px 0 #fff, 16px 16px 0 #fff;\
    -webkit-box-shadow: 16px 0 0 #fff, 0 16px 0 #fff, 16px 16px 0 #fff;\
    -moz-box-shadow: 16px 0 0 #fff, 0 16px 0 #fff, 16px 16px 0 #fff;\
}\
.tabBox{\
    position: absolute;\
    width: 100%;\
    bottom: 55px;\
    height: 100px;\
    z-index: 99;\
    display: none;\
    overflow: hidden;\
}\
.tabBox .bg{\
    width: 100%;\
    height: 100%;\
    background: black;\
    opacity: 0.3;\
}\
.tabBox ul{\
    padding: 0;\
    margin: 0;\
    position: absolute;\
    top: 0;\
    width: 100%;\
    height: 100%;\
    transition: margin .5s;\
}\
.tabBox li{\
    list-style: none;\
    float: left;\
    width: 100px;\
    height: 100px;\
    margin: 0 10px;\
    position: relative;\
    background-size: 100%;\
}\
.tabBox li span{\
    background: black;\
    display: block;\
    width: 100%;\
    bottom: 0;\
    position: absolute;\
    color: white;\
    font-size: 12px;\
    text-align: center;\
    padding: 3px 0;\
}\
.tabBox li img{\
    width: 100%;\
}\
/* loading style */\
#loading{\
    width: 100%;\
    height: 100%;\
    position: absolute;\
    background: #424242;\
}\
\
.spinner {\
  width: 150px;\
    text-align: center;\
    left: 50%;\
    top: 40%;\
    margin-left: -75px;\
    position: absolute;\
}\
 \
.spinner > div {\
  width: 30px;\
  height: 30px;\
  background-color: #ffffff;\
 \
  border-radius: 100%;\
  display: inline-block;\
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;\
  animation: bouncedelay 1.4s infinite ease-in-out;\
  /* Prevent first frame from flickering when animation starts */\
  -webkit-animation-fill-mode: both;\
  animation-fill-mode: both;\
}\
 \
.spinner .bounce1 {\
  -webkit-animation-delay: -0.32s;\
  animation-delay: -0.32s;\
}\
 \
.spinner .bounce2 {\
  -webkit-animation-delay: -0.16s;\
  animation-delay: -0.16s;\
}\
 \
@-webkit-keyframes bouncedelay {\
  0%, 80%, 100% { -webkit-transform: scale(0.0) }\
  40% { -webkit-transform: scale(1.0) }\
}\
 \
@keyframes bouncedelay {\
  0%, 80%, 100% {\
    transform: scale(0.0);\
    -webkit-transform: scale(0.0);\
  } 40% {\
    transform: scale(1.0);\
    -webkit-transform: scale(1.0);\
  }\
}\
/* loading style end */\
        ";
        var style = '<style type="text/css"></style>';
        $("head").append(style);
        $("style").append(cssString);
    }
};